<template>
  <view class="edit-page">
    <view class="content">
      <text class="upload-title">标题</text>
	  <!-- 标题输入 -->
      <u-input
        v-model="form.title"
        placeholder="请输入标题"
        border="bottom"
        class="input-item"
      ></u-input>
	  <text class="upload-title">内容总结</text>
      <!-- 内容输入 -->
      <u-textarea
        v-model="form.content"
        placeholder="请输入内容"
        height="350rpx"
		maxlength="200"
		count
        class="input-item"
      ></u-textarea>

      <!-- 图片上传 -->
      <view class="upload-section">
        <text class="upload-title">上传图片（最多9张）</text>
        <u-upload
          :fileList="fileList3"
          @afterRead="afterRead"
          @delete="deletePic"
          name="3"
          multiple
          :maxCount="10"
          :previewFullImage="true"
        ></u-upload>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn">
      <u-button type="primary" color="#FFB900" icon="checkmark" @click="submitForm">保存记录</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: '',
        content: '',
        images: []
      },
      fileList3: [{ url: 'https://uviewui.com/swiper/1.jpg', }]
    };
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },

    // 图片上传后处理
    afterRead(event) {
      const { file } = event.detail;
      // 这里只是演示，实际项目中需要调用上传接口
      this.fileList.push(file);
      this.form.images.push(file.path);
    },

    // 删除图片
    deleteImg(event) {
      const { index } = event.detail;
      this.fileList.splice(index, 1);
      this.form.images.splice(index, 1);
    },

    // 提交表单
    submitForm() {
      if (!this.form.title) {
        this.$u.toast('请输入标题');
        return;
      }
      if (!this.form.content) {
        this.$u.toast('请输入内容');
        return;
      }
      // 这里添加表单提交逻辑
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      });
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss">
.edit-page {
  padding-bottom: 120rpx;
}

.content {
  padding: 20rpx;
}

.input-item {
  margin-bottom: 30rpx;
}

.upload-section {
  margin: 30rpx 0;
}

.upload-title {
  display: block;
  margin-top: 15rpx;
  margin-bottom: 15rpx;
  color: #606266;
  font-size: 28rpx;
}

.uploader {
  margin-top: 10rpx;
}

.submit-btn {
  position: fixed;
  bottom: 30rpx;
  left: 20rpx;
  right: 20rpx;
}
</style>